<template>
	<view class="container">
		<view class="con-box">
			<view class="title">分析</view>
			<view class="box_shadow info_box base_box">
				<view>
					<image src="../../../static/img/analyze/icon-gas.png" mode=""></image>
					<view>可燃气体监测点 </view>
				</view>
				<view>{{dataDetail.equipSum}}套</view>
			</view>
		</view>
		<view class="alarm">
			<text class="alarm-title">燃气报警</text>
			<view class="box_shadow alarm_box base_box alarm-equip">
				<view>当前燃气报警<text>{{transToThree(dataDetail.alarmSum)}}</text>起</text></view>
			</view>
		</view>
		
		<view class="alarm-info ">
			<ul class="flex_between_foot" v-for="(item,index) in alarmList" :key='index'>
				<li class="foot-text" @click="levelJump(index+1)">
					<view class="lavel">
						<image :src="'../../../static/img/analyze/icon-level'+(index+1)+'.png'" mode=""></image>
						<view>{{item.title}}</view>
					</view>
					<view class="alarm-level">{{item.level}}</view>
					<view class="alarm-total">{{item.total}}<text>起</text>
					<image class="jump_icon" :src="'../../../static/img/analyze/icon-jump'+(index+1)+'.png'" mode=""></image>
					</view>
				</li>
			</ul>
		</view>

		<view class="chartBox" style="box-shadow: 0px 8rpx 28rpx  rgba(29, 99, 182, 0.08);">
			<view class="chart-header">
				<text>报警数量</text>

				<view class="uni-list-cell-db" @click="open(1)">
				 <!-- <picker  :selector-type="'auto'" @change="bindPickerChange" :value="index" :range="array" @click="open(1)" @cancel="cancle(1)"> -->
						<view class="picker"> 
							<view class="uni-input">{{array[alarmIndex]}}</view>
							<image :src="alarmSrc" mode=""></image>
						</view>
					<!-- </picker> -->
				</view>
			</view>
			<uni-ec-canvas class="uni-ec-canvas1" id="uni-ec-canvas1" ref="uni-ec-canvas1" canvas-id="uni-ec-canvas1"
				:ec="ecAlarm"></uni-ec-canvas>
		</view>

		<view class="alarm">
			<text class="alarm-title">设备异常</text>
			<view class="box_shadow alarm_box base_box abnormal-equip"
				:style="{'background-image': `url(${statisticsUrl})`}">
				<view>当前设备异常<text>{{transToThree(dataDetail.abnormalSum)}}</text>起</text>
				<view class="alarmJump" @click="alarmJump"></view></view>	
			</view>
		</view>

		<view class="chartBox">
			<view class="chart-header">
				<text>异常数量</text>
				<view class="uni-list-cell-db" @click="open(2)">
					<!-- <picker @change="bindPickerChange1" :value="index" :range="array" @click="open(2)" @cancel="cancle(2)"> -->
						<view class="picker"> 
							<view class="uni-input">{{array[abnormalIndex]}}</view>
							<image :src="abnormaSrc" mode=""></image>
						</view>
					<!-- </picker> -->
				</view>
			</view>
			<uni-ec-canvas class="uni-ec-canvas2" id="uni-ec-canvas2" ref="uni-ec-canvas1" canvas-id="uni-ec-canvas2"
				:ec="ecAbnormal"></uni-ec-canvas>
		</view>

	</view>
</template>

<script>
	let vm;
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				statisticsUrl: 'https://6761-gas-monitor-01-16c3ed-1303022585.tcb.qcloud.la/gasAiot/statistics-abnormal.png',
				cHeight: 0,
				cWidth: 0,
				title: 'picker',
				array: ['年', '月', '日'],
				alarmIndex: 1,
				abnormalIndex:1,
				alarmSrc: "../../../static/img/analyze/icon-up.png",
				abnormaSrc: "../../../static/img/analyze/icon-up.png",
				dataDetail:{
					abnormalDateList:[],
					abnormalNumList:[],
					abnormalSum:0,
					alarmDateList:[],
					alarmNumList:[],
					alarmSum:0,
					first:0,
					second:0,
					third:0,
				}
			};
		},
		onShow() {
			uni.removeStorage({
				key: 'monitorDetail'
			})
			uni.removeStorage({
				key: 'realtimeMonitorDetail'
			})
			uni.removeStorage({
				key:'curMarkerId'
			})
			
			this.getEquipStatistic()
			
		},
		onLoad(params) {
			vm = this;
		},
		mounted() {
			uni.getSystemInfo({
				success(res) {
					vm.cHeight = res.windowHeight;
					vm.cWidth = res.windowWidth;
				}
			});
		},
		computed: {
			...mapState({
				userInfo: ({ user }) => user.userInfo,
			}),
			alarmList(){
				return [
					{title:"高",level:"1级报警",total:this.dataDetail.first},
					{title:"中",level:"2级报警",total:this.dataDetail.second},
					{title:"低",level:"3级报警",total:this.dataDetail.third},
				]
			},
			
			ecAlarm() {
				vm = this
				return {
					option: {
						grid: {
							left: '20',
							right: '25',
							top: '8%',
							bottom: '25%',
							containLabel: true
						},
						tooltip: {
							confine: true,
							trigger: 'axis',
							// backgroundColor: 'rgba(95,105,121,0.)',
							// axisPointer: {
							// 	type: 'shadow'
							// },
							formatter: `{b}`
						},
						xAxis: [{
							type: 'category',
							boundaryGap: false,
							axisLabel: {
								show: true,
								textStyle: {
									color: '#999' //X轴文字颜色
								}
							},
							axisLine: {
								lineStyle: {
									color: '#d3d3d3'
								}
							},
							axisTick: {
								show: false
							},

							data: vm.dataDetail.alarmDateList
						}],
						yAxis: [{
							type: 'value',
							name: '',
							nameTextStyle: {
								color: '#4187f1',
								fontSize: '14px',
								align: 'left',
							},
							min: 0,
							axisLabel: {
								show: true,
								textStyle: {
									color: '#999' //X轴文字颜色
								}
							},
							axisLine: {
								lineStyle: {
									color: '#d3d3d3'
								}
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed',
									color: '#f1f1f1'
								}
							},
						}],
						series: [{
							name: '报警数量',
							// type: 'line',
							type: 'bar',
							// symbol: 'none',
							// smooth: true,
							barWidth:8,
							itemStyle: {
								normal: {
									borderRadius: [5, 5, 0, 0],
									color: '#4F93FA',
									// lineStyle: {
									// 	color: '#4187f1',
									// 	width: 2
									// }
								}
							},
							label:{
								show:true,
								position:'top'
							},
							data: vm.dataDetail.alarmNumList
						}]
					}
				};
			},
			ecAbnormal() {
				vm = this
				return {
					option: {
						grid: {
							left: '20',
							right: '25',
							top: '8%',
							bottom: '25%',
							containLabel: true
						},
						tooltip: {
							confine: true,
							trigger: 'axis',
							// backgroundColor: 'rgba(95,105,121,0.)',
							// axisPointer: {
							// 	type: 'shadow'
							// },
							formatter: `{b}`
						},
						xAxis: [{
							type: 'category',
							boundaryGap: false,
							axisLabel: {
								show: true,
								textStyle: {
									color: '#999' //X轴文字颜色
								}
							},
							axisLine: {
								lineStyle: {
									color: '#d3d3d3'
								}
							},
							axisTick: {
								show: false
							},
			
							data: vm.dataDetail.abnormalDateList
						}],
						yAxis: [{
							type: 'value',
							name: '',
							nameTextStyle: {
								color: '#4187f1',
								fontSize: '14px',
								align: 'left',
							},
							min: 0,
							// max: 25,
							axisLabel: {
								show: true,
								textStyle: {
									color: '#999' //X轴文字颜色
								}
							},
							axisLine: {
								lineStyle: {
									color: '#d3d3d3'
								}
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed',
									color: '#f1f1f1'
								}
							},
						}],
						series: [{
							name: '报警数量',
							type: 'bar',
							// symbol: 'none',
							// smooth: true,
							barWidth:8,
							borderRadius: [5, 5, 0, 0],
							itemStyle: {
								normal: {
									borderRadius: [5, 5, 0, 0],
									color: '#677CB2',
									// lineStyle: {
									// 	color: '#4187f1',
									// 	width: 2
									// }
								}
							},
							label:{
								show:true,
								position:'top'
							},
							data: vm.dataDetail.abnormalNumList
						}]
					}
				};
			}
		},

		watch: {},
		methods: {
			getEquipStatistic(){
				let alarmCycle = this.transToStr(vm.alarmIndex)
				let abnormalCycle = this.transToStr(vm.abnormalIndex)
				
				
				console.log(alarmCycle)
				console.log(abnormalCycle)
				vm.$api.getEquipStatistic({
					userName:vm.userInfo.nickName,
					alarmCycle:alarmCycle,
					abnormalCycle:abnormalCycle,
				}).then(res => {
					// vm.dataDetail = {...res.data.data}
					let temp = {...res.data.data}
					
					temp.alarmNumList.forEach((item,i) => {
						if(!item) {
							temp.alarmNumList[i] = ''
						}
					})
					temp.abnormalNumList.forEach((item,i) => {
						if(!item) {
							temp.abnormalNumList[i] = ''
						}
					})
					vm.dataDetail = temp
				})
			},
			transToThree(val){
				if(val < 9) {
					return '00'+ val
				}else if(val < 99) {
					return '0'+ val
				}else{
					return val
				}
			},
			transToStr(val){
				switch(val){
					case 0:
					return 'year';
					break;
					case 2:
					return 'day';
					break;
					default:
					return 'month';
				}
			},
			open(index) {
				if(index==1){
					vm.alarmSrc="../../../static/img/analyze/icon-down.png";	
				}else{
					vm.abnormaSrc = "../../../static/img/analyze/icon-down.png"
				}
				uni.showActionSheet({
				    itemList: vm.array,
				    success: function (res) {
						if(index==1){
							vm.alarmIndex=res.tapIndex;
						}else{
							vm.abnormalIndex=res.tapIndex;
						}
						console.log("哈哈哈哈"+res.tapIndex)
						vm.cancle(index);
						vm.getEquipStatistic();
				    },
				    fail: function (res) {
				        vm.cancle(index);
				    }
				});
				
			},
			cancle(index) {
				if(index==1){
					vm.alarmSrc="../../../static/img/analyze/icon-up.png";	
				}else{
					vm.abnormaSrc = "../../../static/img/analyze/icon-up.png"
				}
			},
			// bindPickerChange: function(e) {
			// 	vm.alarmSrc = '../../../static/img/analyze/icon-up.png';
			// 	console.log('picker发送选择改变，携带值为', e.target.value)
			// 	vm.alarmIndex = e.target.value
			// 	vm.getEquipStatistic()
			// },
			// bindPickerChange1: function(e) {
			// 	vm.abnormaSrc = '../../../static/img/analyze/icon-up.png';
			// 	console.log('picker发送选择改变，携带值为', e.target.value)
			// 	vm.abnormalIndex = e.target.value
			// 	vm.getEquipStatistic()	
			// },
			levelJump(level){
				uni.setStorage({
					key:'curType',
					data:"燃气报警"
				})
				uni.setStorage({
					key:'level',
					data:level
				})
				uni.$emit('filterAlarmFromAna',level)
				vm.jumpTab();
			},
			alarmJump(){
				uni.setStorage({
					key:'curType',
					data:"设备异常"
				})
				uni.$emit('filterAlarmFromAna')
				vm.jumpTab();
			},
			jumpTab(){
				uni.switchTab({
				   url:`/pages/tabbar/monitor-alarm/monitor-alarm`,
				});
			}

		}
	};
</script>

<style lang="scss" scoped>
	.container {
           min-height: 100vh;
		   background: linear-gradient(0deg, #fff 0%, #fff 60%,#E8F4FE 100%);
		.con-box {
			margin-top: 116rpx;
               // background: linear-gradient(0deg, #fff 0%, #E8F4FE 100%);
			.title {
				font-size: 36rpx;
				font-weight: 800;
				color: #000000;
				position: relative;
				text-align: center;
				width: 100%;
			}
		}
	}

	.base_box {
		border-radius: 16rpx;
		margin: $uni-spacing-col-36;
		// padding: 33rpx $uni-spacing-col-36;
	}

	.info_box {
		margin-top: 50rpx;
		padding: 33rpx $uni-spacing-col-36;
		position: relative;
		background: $uni-border-color;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
		height: 156rpx;
		image {
			width: 82rpx;
			height: 82rpx;
			margin-right: 35rpx;
		}

		view {
			color: #333333;
			font-weight: bold;
			font-size: 32rpx;
			display: flex;
			flex-direction: row;
			margin: auto 0;
		}
	}

	.alarm {
		margin-top: 60rpx;
		position: relative;
	}

	.alarm-title {
		margin: $uni-spacing-col-36;
		font-size: $uni-spacing-col-36;
		font-weight: bold;
		color: #333333;
	}

	.alarm-equip {
		background: url(../../../static/img/analyze/statistics-alarm.png) no-repeat;
		background-size: 100% 100%;
	}

	.abnormal-equip {
		background: no-repeat;
		background-size: 100% 100%;
		.alarmJump{
			position: absolute;
			top: 2rpx;
			left: 388rpx;
			width: 131rpx;
			height: 100%;

		}
	}

	.alarm_box {
		color: $uni-border-color;
		padding-left: 155rpx;
        height:110rpx;
		line-height: 90rpx;
		view{
			font-size: 25rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FDFAFA;
			text {
				margin: 0 20rpx;
				font-size: 60rpx;
				font-weight: bold;
				font-style: italic;
				font-family: Roboto;
				position: relative;
				top: 8rpx;
				letter-spacing: 3rpx;
			}
		}
		
	}

	.alarm-info {
		border-radius: 16rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		margin: 0 $uni-spacing-col-36;
		.flex_between_foot {
			background: $uni-border-color;
			border-radius: 16rpx;
			width: 27%;
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			background: #FFF1EE;
			// opacity: 0.8;
			.foot-text {
				display: flex;
				flex-direction: column;

				.lavel {
					display: flex;
					flex-direction: row;
					view {
						padding:10rpx;
						width: 40rpx;
						font-weight: bold;
						font-size: 20rpx;
						background: #FDCCC1;
						border-radius: 8rpx;
						color: #F55A3F;
						line-height: 28rpx;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
				.alarm-level {
					font-size: 28rpx;
					font-weight: 500;
					color: #666666;
					line-height:80rpx;
					height: 60rpx;
					position: relative;
				}
				.alarm-total {
					font-size: 60rpx;
					font-weight: bold;
					font-style: italic;
					font-family: Roboto;
					color: #333333;
					text{
						font-size: 28rpx;
						font-weight: 500;
						font-style: italic;
						color: #666666;
						margin-left: 10rpx;
					}
				}
				.jump_icon{
					width: 48rpx;
					height: 30rpx;
					position: absolute;
					left: 107rpx;
					top: 36rpx;
				}
			}

			&:nth-child(2) {
				background: #FFF0E2;
				margin-left: $uni-spacing-col-36;
				.lavel >view{
							background: #FBDBBA;
							color: #F1A55D;
					}
			}

			&:last-child {
				background: #FFF6DA;
				margin-left: $uni-spacing-col-36;
				.lavel >view{
							background: #F6E4B4;
							color: #D9A62F;
					}
			}
		}

	}

	.chartBox {
		width: calc(100%-72rpx);
		height: 450rpx;
		margin: $uni-spacing-col-36 0;
		.chart-header {
			margin: 0 $uni-spacing-col-36;
			border-top: 1rpx solid #F4F4F4;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: 40rpx;
			font-weight: bold;
			color: #333333;
			font-size: 30rpx;

			.uni-list-cell-db {
				height: 50rpx;
				text-align: right;
				width: 200rpx;
				padding-left: 120rpx;
			.picker {
					display: flex;
					flex-direction: row;
					.uni-input{
						color: #333333;
						font-size: 28rpx;
						}
				}

				image {
					width: 20rpx;
					height: 20rpx;
					margin: auto 15rpx;
				}
			}
		}
	}
</style>
